Node / mirrors / respira / files / src / components / ProgressMonitor / ProgressStats.tsx

Displaying Raw • Download

/**

* ProgressStats Component

*

* Displays three stat cards: stitches (current/total), time (elapsed/total), and speed

*/

interface ProgressStatsProps {

currentStitch: number;

totalStitches: number;

elapsedMinutes: number;

totalMinutes: number;

speed: number;

}

export function ProgressStats({

currentStitch,

totalStitches,

elapsedMinutes,

totalMinutes,

speed,

}: ProgressStatsProps) {

return (

<div className="grid grid-cols-3 gap-2 text-xs mb-3">

<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">

<span className="text-gray-600 dark:text-gray-400 block">Stitches</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{currentStitch.toLocaleString()} / {totalStitches.toLocaleString()}

</span>

</div>

<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">

<span className="text-gray-600 dark:text-gray-400 block">Time</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{elapsedMinutes} / {totalMinutes} min

</span>

</div>

<div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">

<span className="text-gray-600 dark:text-gray-400 block">Speed</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{speed} spm

</span>

</div>

</div>

);

}